$primaryBlack: #333;
$common: #595959;
$weak: #8c8c8c;
$weaker: #c2c2c2;
$gray: #999999;
$background: #f4f4f4;
$borderColor: #e8e8e8;
$borderLineColor: rgba(232, 232, 232, 0.4);
$theme: #47C690;
$warning: #F1444D;
$iconGray: #8E8E93;
$grayE9: #E9E9E9;
$minDeviceHeight: 812px;
$maxDeviceHeight: 999px;

$loginModal: 'https://careoss.p88health.com/icon/login_modal.png';
$bgQuestionnaire: 'https://careoss.p88health.com/icon/bg_questionnaire.png';
$bgSurveyHeader: 'https://careoss.p88health.com/icon/bg_survey_header.png';
$prescriptionMessageBack: 'https://careoss.p88health.com/icon/prescription_message.png';
$couponMessageBack: 'https://careoss.p88health.com/icon/coupon_back.png';
$couponDetailBack: 'https://careoss.p88health.com/icon/bg_coupon_detail.png';
$managePlan: 'https://careoss.p88health.com/icon/manage_plan_mind.png';
$surveyPlanCard: 'https://careoss.p88health.com/icon/survey_plan_card.png';
$surveyPlanCardViewed: 'https://careoss.p88health.com/icon/survey_plan_card_viewed.png';
$feedItemPlanCard: 'https://careoss.p88health.com/icon/feeditem_plan_card.png';
$feedItemPlanCardViewed: 'https://careoss.p88health.com/icon/feeditem_plan_card_viewed.png';
$coursePlanCard: 'https://careoss.p88health.com/icon/course_plan_card.png';
$coursePlanCardViewed: 'https://careoss.p88health.com/icon/course_plan_card_viewed.png';
$meditationShare: 'https://careoss.p88health.com/icon/share_meditation_popup.png';
$meditationDetailBg: 'https://careoss.p88health.com/icon/meditation_detail_bg.png';
$RecordSurveyChecked: 'https://careoss.p88health.com/icon/icon_med_record_survey_checked.png';
$RecordSurveySelected: 'https://careoss.p88health.com/icon/icon_med_record_survey_selected.png';

@mixin tabActive {
  &:active {
    opacity: 0.7;
  }
}

@mixin ifdef($attr, $value, $platform) {
  /*  #ifdef  #{$platform}  */
  #{$attr}: $value;
  /*  #endif  */
}
@mixin ifndef($attr, $value, $platform) {
  /*  #ifndef  #{$platform}  */
  #{$attr}: $value;
  /*  #endif  */
}

@mixin border($dir, $width, $style, $color) {
  border: 0 $style $color;
  @each $d in $dir {
    #{border-#{$d}-width}: $width;
  }
}

@mixin textOverflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@mixin line-ellipsis-x($lines){
  /*  #ifndef  #{rn}  */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /*  #endif  */
}
@mixin boxShadow {
  /*  #ifndef  #{rn}  */
  box-shadow:0px 3px 6px 2px rgba(207,207,207,0.1);
  /*  #endif  */
}

@mixin boxShadow1 {
  /*  #ifndef  #{rn}  */
  box-shadow:1px 3px 6px 2px rgba(207,207,207,0.3);
  /*  #endif  */
}

@mixin  boxShadow2 {
  /*  #ifndef  #{rn}  */
  box-shadow: 0px 2px 12px 2px rgba(186, 185, 185, 0.2);
  /*  #endif  */
}
@mixin  boxShadow3 {
  /*  #ifndef  #{rn}  */
  box-shadow: 0px 2px 12px 3px rgba(186, 185, 185, 0.25);
  /*  #endif  */
}
@mixin boxShadowGray25 {
  /*  #ifndef  #{rn}  */
  box-shadow: 0px 2px 5px 3px rgba(207, 207, 207, 0.25);
  /*  #endif  */
}

@mixin boxShadow1Gray25 {
  /*  #ifndef  #{rn}  */
  box-shadow: 1px 3px 6px 2px rgba(207,207,207,0.25);
  /*  #endif  */
}
@mixin boxShadowServicePack {
  /*  #ifndef  #{rn}  */
  box-shadow: 0 3px 6px 0 rgba(207, 123, 0, 0.3);
  /*  #endif  */
}

@mixin boxShadowBotCard {
  /*  #ifndef  #{rn}  */
  box-shadow: 0 4px 8px 0 rgba(225, 225, 225, 0.4);
  /*  #endif  */
}
@mixin boxShadowThemeBtn {
  /*  #ifndef  #{rn}  */
  box-shadow: 0 3px 5px 1px rgba(0, 46, 26, 0.05);
  /*  #endif  */
}
@mixin boxShadowPlanReportCard {
  /*  #ifndef  #{rn}  */
  box-shadow: 0 2px 8px 3px rgba(199, 199, 199, 0.1);
  /*  #endif  */
}

@mixin boxSizing {
  /*  #ifndef  #{rn}  */
  box-sizing: border-box;
  /*  #endif  */
}

@mixin homeBoxShadow{
  /*  #ifndef  #{rn}  */
  box-shadow: 0px 3px 10px 3px rgba(207, 207, 207, 0.25);
  /*  #endif  */
}

@mixin positionFixed{
  @include ifdef(position, absolute, rn);
  @include ifndef(position, fixed, rn)
}
@mixin zeroPointFiveBorder($radius: 0px) {
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $borderColor;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    z-index: -1;
    border-radius: $radius;
  }
}

@mixin zeroPointFiveBorderBottom {
  &:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: $borderColor;
    transform: translateY(50%);
  }
}

.flexRow{
  display: flex;
  flex-direction: row;
}
.theme{
  color: $theme;
}
